<template>
	<view class="container">
	   	<view class="user-info">
			<u-row
			    justify="space-between"
			    gutter="10">
					<u-col span="2">
						<u--image class="head" :src="src" width="60px" height="60px" shape="circle" @click="click"></u--image>
					</u-col>
					<u-col span="6">
						<span class="name">小松鼠</span>
						<span class="phone">14100000000</span>
					</u-col>
					<u-col span="2">
						<span>收藏</span>
					</u-col>
			    </u-row>	
		</view>
		<view class="orders">
			<u-row
			justify="space-between"
			gutter="10">
				<u-col span="7">
					<u--text :bold="true" iconStyle="font-size:30rpx;" text="我的订单"></u--text>
				</u-col>
				<u-col span="3">
					<navigator url="/pages/orders/orders">
						<span class="all-orders">
							全部订单
							<u-icon class="icon-arrow" name="arrow-right" color="#939090" size="15"></u-icon>
						</span>
					</navigator>
				</u-col>
			</u-row>
			<view class="order-state">
				<u-grid :border="false" col="4">
					<u-grid-item
						v-for="(listItem,listIndex) in stateList"
						:key="listIndex"
						class="tab_item"
						>
						<u--image shape="circle" width="50rpx" height="50rpx" :src="listItem.icon"></u--image>
						 <u-badge :absolute="true" :offset=[3,7] :is-center="true" :type="type" max="99" :value="value"></u-badge>
						 <text class="grid-text">{{listItem.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:'https://cdn.uviewui.com/uview/album/1.jpg',
				type:"error",
				value:20,
				stateList:[
					{id:'00001',icon:'/static/payment.png',name:'代付款'},
					{id:'00002',icon:'/static/deliver.png',name:'代发货'},
					{id:'00003',icon:'/static/evaluate.png',name:'待评价'},
					{id:'00004',icon:'/static/cancel.png',name:'已取消'}
				]
			}
		},
		methods: {
			click(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
     .container{
		 padding: 20rpx;
		 .user-info{
			 width: 100%;
			 height: 360rpx;
			 background-color: black;
             border-radius: 10rpx;
			 color: white;
			 .head{
				 padding: 50rpx;
			 }
			 .name{
				 font-size: 34rpx;
				 margin-bottom: 10rpx;
			 }
			 .phone{
				 font-size: 24rpx;
			 }
		 }
		 // 订单
		 .orders{
			padding-top: 20rpx;
		    .all-orders{
				color: #939090;
				font-size: 26rpx;
				.icon-arrow{
					display: inline-block;
					// margin-left: 4rpx;
				}
				
			}	
			.order-state{
				position:relative;
				.tab_item{
					padding-top: 20rpx;
					.grid-text{
						font-size: 20rpx;
						color: #6a6767;
					}
				}
				
			}
		 }
	 } 
</style>
